<template>
  <div>
    <el-card>
      <h1 slot="header">老人信息列表</h1>
      <el-button type="primary" @click="openAddDialog" style="margin-bottom: 20px">添加老人</el-button>
      <el-table :data="elders" border style="width: 100%">
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="age" label="年龄"></el-table-column>
        <el-table-column prop="interests" label="兴趣爱好"></el-table-column>
        <el-table-column prop="robert_id" label="机器人编号"></el-table-column>
        <el-table-column prop="height" label="身高"></el-table-column>
        <el-table-column prop="weight" label="体重"></el-table-column>
        <el-table-column prop="health_status" label="病情"></el-table-column>
        <el-table-column label="操作" width="280">
          <template #default="scope">
            <el-button @click="openEditDialog(scope.row)">编辑</el-button>
            <el-button type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
            <el-button type="primary" @click="handleDetail(scope.row.id)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 添加老人弹窗 -->
    <el-dialog v-model="addDialogVisible" title="添加老人">
      <el-form :model="form">
        <el-form-item label="姓名">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input v-model="form.age"></el-input>
        </el-form-item>
        <el-form-item label="兴趣爱好">
          <el-input v-model="form.interests"></el-input>
        </el-form-item>
        <el-form-item label="机器人编号">
          <el-input v-model="form.robert_id"></el-input>
        </el-form-item>
        <el-form-item label="身高">
          <el-input v-model="form.height"></el-input>
        </el-form-item>
        <el-form-item label="体重">
          <el-input v-model="form.weight"></el-input>
        </el-form-item>
        <el-form-item label="病情">
          <el-input v-model="form.health_status"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleAdd">添加</el-button>
      </span>
    </el-dialog>

    <!-- 编辑老人弹窗 -->
    <el-dialog v-model="editDialogVisible" title="编辑老人">
      <el-form :model="form">
        <el-form-item label="姓名">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input v-model="form.age"></el-input>
        </el-form-item>
        <el-form-item label="兴趣爱好">
          <el-input v-model="form.interests"></el-input>
        </el-form-item>
        <el-form-item label="机器人编号">
          <el-input v-model="form.robert_id"></el-input>
        </el-form-item>
        <el-form-item label="身高">
          <el-input v-model="form.height"></el-input>
        </el-form-item>
        <el-form-item label="体重">
          <el-input v-model="form.weight"></el-input>
        </el-form-item>
        <el-form-item label="病情">
          <el-input v-model="form.health_status"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleEdit">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { addElder, deleteElder, modifyElder, showOldList } from '@/api/InforManage';
import {ElMessage} from "element-plus";
import router from "@/router";

interface Elder {
  id: string;
  name: string;
  age: string;
  interests: string;
  robert_id: number;
  height: number;
  weight: number;
  health_status: string;
}

const elders = ref<Elder[]>([]);
const form = reactive<Elder>({
  id: "0",
  name: "0",
  age: "0",
  interests: "0",
  robert_id: 0,
  height: 0,
  weight: 0,
  health_status: "0"
});
const addDialogVisible = ref(false);
const editDialogVisible = ref(false);

const fetchElders = async () => {
  try {
    const response = await showOldList();
    if (response.data.respCode === '000000') {
      elders.value = response.data.list;
    } else {
      console.error('Error fetching elders:', response.data.respMsg);
    }
  } catch (error) {
    console.error('Error fetching elders:', error);
  }
};

const openAddDialog = () => {
  console.log('openAddDialog called');
  Object.assign(form, {
    id: "0",
    name: "0",
    age: "0",
    interests: "0",
    robert_id: 0,
    height: 0,
    weight: 0,
    health_status: "0"
  });
  addDialogVisible.value = true;
};

const openEditDialog = (elder: Elder) => {
  console.log('openEditDialog called with elder:', elder);
  Object.assign(form, elder);
  editDialogVisible.value = true;
};

const handleAdd = async () => {
  try {
    await addElder(form);
    await fetchElders();
    addDialogVisible.value = false;
    ElMessage.success('添加成功');
  } catch (error) {
    console.error('Error adding elder:', error);
  }
};

const handleEdit = async () => {
  try {
    await modifyElder(form);
    await fetchElders();
    editDialogVisible.value = false;
    ElMessage.success('编辑成功');
  } catch (error) {
    console.error('Error modifying elder:', error);
  }
};

const obj = {"id":""};
const handleDelete = async (id: string) => {
  try {
    obj.id = id;
    await deleteElder(obj);
    await fetchElders();
    ElMessage.success("删除成功");
  } catch (error) {
    console.error('Error deleting elder:', error);
  }
};

const handleDetail= async (id: string) => {
  console.log("id:",id)
  router.push("/layout/user/health/" + id);
};

// const handleSelect = (key: string) => {
//   router.push({ path: "/layout/" + key });
// }
onMounted(() => {
  fetchElders();
});
</script>

<style scoped>
.dialog-footer {
  display: flex;
  justify-content: end;
}
</style>
